<template>
<el-card class="box-card" >
<el-row class="tac">
   
  <el-col :span="8">
       <el-card>
        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item>
            <el-row style="margin-top:20px">
                <el-col :span="19">
                     <el-input v-model="contetnt.input" placeholder="搜索支持患者名称模糊查询"></el-input>
                </el-col>
                <el-col :span="5">
                     <el-button type="primary" icon="el-icon-search" @click="hzlis"></el-button>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-ul  >
                <el-li v-for="(hz,i) in hzlist" :key="i"  @click="hzclike(hz.patientId,i)">
                     
                    <el-row >
                         <el-col :span="4"> 
                             <img src="/assets/MiaoAnBackground.png" style="height: 40px;border-radius: 50%"/>
                        </el-col>
                        <el-col :span="16" style="text-align:left">    
                               <p style="font-size:20px">{{hz.patient.patientName}}</p> 
                               <p style="font-size:15px">{{hz.contentText}}</p>
                        </el-col>
                         <el-col :span="4">
                              <el-badge :value="hz.noRead" class="item" type="small" v-if="hz.noRead>0">
                                <span>{{hz.createTime}}</span>
                              </el-badge>
                              <span  v-if="hz.noRead==0">{{hz.createTime}}</span>
                        </el-col>
                    </el-row>
                 
                    <el-divider></el-divider>
                </el-li>
            </el-ul>
        </el-form-item>
        </el-form>
        </el-card>
  </el-col>


  <el-col :span="16">
      <el-card>
              <p class="ctenthead">
                <el-row>
                    <el-col :span="6">
                        <p>
                       <span>To:</span>
                         <el-tag
                                 v-text="toName"
                            effect="dark" style="font-size:25px">
                        </el-tag>
                       </p>    
                    </el-col>
                </el-row>
            </p>
          <div class="ctentltl">
            <el-row v-for="(hz,i) in ltlist" :key="i">
                 <p class="ctentleft" v-if="hz.isInitiator==1">
                   <span>{{hz.contentText}}</span> 
                 </p>   
                 <p class="ctentright" v-if="hz.isInitiator==2">
                    <span>{{hz.contentText}}</span>
                </p> 
            </el-row>
            </div> 
            <el-button class="ctentqc">清除</el-button>
                <el-button type="primary" class="ctentok" @click="send">发送</el-button>
                <el-button type="file" class="ctentsc" >上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <div class="ctentsrl" ref="text" contenteditable="plaintext-only">     
            </div>    
      </el-card>
  </el-col>
  
</el-row>  
</el-card> 
</template>
<script>
  export default {
    data() {
        return {
         contetnt:{
             doctorId:'4',
             patientId:"" ,
             addisInitiator:2,  //添加时设置发送方为医生
             contentText:"",
             isInitiator:1 ,  //查寻设置发送方为患者
             input: '',//搜索框中的患者名称
         },   
         v1:'4',  
         text:'',//输入框中的内容
         path:"ws://localhost:8082/miaoan/api/biz/imserver/",//访问服务器的地址
         socket:"",//wescoket对象
         hzlist:"",//患者列表
         numberValidateForm:{},
         ltlist:{}, //聊天列表 
         toName:''
     }
    },
    mounted() {
      
        this.hzlis();
         this.init();
         
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
     hzlis(){
         //获取与医生聊过天的患者列表
         this.$axios.post("/api/biz/hz/list",this.contetnt).then((res)=>{ 
             if(res.data.code==0){
                 this.hzlist=res.data.data;
             }else{
                 console.log("获取患者列表错误"+res.data.code)
             }
             
         })
        },
        hzclike(paId,i){
            this.hzlist[i].noRead=0;
            this.contetnt.patientId=paId;
            this.toName=this.hzlist[i].patient.patientName;
              console.log("患者姓名"+this.hzlist[i].patient.patientName);
            //将患者发给医生的消息设为已读
            this.$axios.post("/api/biz/hz/upread",this.contetnt).then((res)=>{ 
             if(res.data.code==0){
                 
             }else{
                 console.log("更新聊天已读状态错误"+res.data.code)
             }
            })
            //根据不同的用户更改聊天记录
             this.$axios.post("/api/biz/hz/ltlist",this.contetnt).then((res)=>{ 
             if(res.data.code==0){
                 this.ltlist=res.data.data;
             }else{
                 console.log("获取聊天记录错误"+res.data.code)
             }   
              this.buttomhei();
         })
            console.log("患者id"+paId);
        },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      buttomhei(){
             this.$nextTick(() => {
            var div = document.getElementsByClassName("ctentltl")[0];
             console.log(div.scrollHeight)
            div.scrollTop = div.scrollHeight;
            })
      },
       init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path+this.v1)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {

            console.log(msg.data)
        },
        send: function () {
             this.ltlist.push({
                contentText: this.$refs.text.innerHTML,
                 isInitiator:2,
            })
            //发送信息
            this.socket.send('{"toUserId":"'+"b1"+'","contentText":"'+this.$refs.text.innerHTML+'"}')
             //保存记录到数据库
             this.contetnt.contentText=this.$refs.text.innerHTML;
             this.$axios.post("/api/biz/hz/addjl",this.contetnt).then((res)=>{ 
                if(res.data.code==0){      
                }else{
                   alert("有问题")
                }    
            })
            this.$refs.text.innerHTML="";
            this.$refs.text.focus();
            this.buttomhei();
        },
        close: function () {
            console.log("socket已经关闭")
        },
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    },
    
  }
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
.ctentltl{
   height: 450px;
   overflow:auto;
}
.ctentsrl{
    padding-top:5px ;
    padding-bottom:40px ;
    padding-left:3px ;
    text-align: left;
    height: 150px;
    overflow:auto;
    border-top: 1px solid;
}
.ctenthead{
     font-size: 20px;
    height: 50px;
    text-align: left;
    background-color: #eceff1;
}
.ctenthead p{
    margin-left: 80px;
    margin-top: 10px;
}
.ctentleft{
   font-size: 16px;
   padding: 10px;
   text-align: left;
}
.ctentleft span{
    color: white;
    background-color:#00b0ff;
    border-radius: 6%;
    display: inline-block;
    padding: 15px;
}
.ctentright{ 
    font-size: 16px; 
    padding: 10px;
    text-align: right;
}
.ctentright span{
    background-color:#eceff1;
    border-radius: 6%;
    display: inline-block;
    padding: 15px;
}
.ctentsc{
     position:fixed;
    bottom:40px;
	right:250px;
}
.ctentqc{
    position:fixed;
    bottom:40px;
	right:150px;
}
.ctentok{
    position:fixed;
    bottom:40px;
	right:50px;
}
.el-card__body{
    padding: 0px;
}
.box-card {
    width: 100%;
    margin-top: 0px;
}

</style>